<template>
	<view>
		<view class="item" style="padding-top: 20rpx;">
			<u-icon name="order" color="#1573FF" label="订单信息" labelColor="#333333"></u-icon>
			<u-line color="#efefef" margin="20rpx 0"></u-line>
			<view class="text-line">
				<text class="text-name">订单编号:</text>
				<text class="text-value">{{detail.orderInfo.orderNo|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">订单状态:</text>
				<text class="text-value">{{detail.orderInfo.orderStatus|shortOrderStatus}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">取车类型:</text>
				<text class="text-value">{{detail.orderInfo.rentalType|rentalType}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">取车门店:</text>
				<text class="text-value">{{detail.orderInfo.takeStoreName|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">还车门店:</text>
				<text class="text-value">{{detail.orderInfo.alsoStoreName|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">预约车型:</text>
				<text class="text-value">{{detail.orderInfo.modelName|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">预约取车时间:</text>
				<text class="text-value">{{detail.orderInfo.rentalStartTime|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">预约还车时间:</text>
				<text class="text-value">{{detail.orderInfo.rentalEndTime|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">租期（天）:</text>
				<text class="text-value">{{detail.orderInfo.leaseDays|filterNull}}</text>
			</view>

		</view>
		<view class="item" style="padding-top: 20rpx;">
			<u-icon name="order" color="#1573FF" label="车辆信息" labelColor="#333333"></u-icon>
			<u-line color="#efefef" margin="20rpx 0"></u-line>
			<view class="text-line">
				<text class="text-name">用车车型:</text>
				<text class="text-value">{{detail.orderInfo.actualModelName}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">车牌号:</text>
				<text class="text-value">{{detail.carInfo.carNo|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">车架号:</text>
				<text class="text-value">{{detail.carInfo.vinNo|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">发动机号:</text>
				<text class="text-value">{{detail.carInfo.engineNo|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">能源形式:</text>
				<text class="text-value">{{detail.carInfo.styleModel|styleModel}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">燃油类型:</text>
				<text class="text-value">{{detail.carInfo.fuelType|fuelType}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">变速箱:</text>
				<text class="text-value">{{detail.carInfo.speedChangingBox|speedChangingBox}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">座位数:</text>
				<text class="text-value">{{detail.carInfo.seating|seat}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">排量:</text>
				<text class="text-value">{{detail.carInfo.displacement|displacement}}</text>
			</view>
		</view>
		<view class="item" style="padding-top: 20rpx;">
			<u-icon name="order" color="#1573FF" label="客户信息" labelColor="#333333"></u-icon>
			<u-line color="#efefef" margin="20rpx 0"></u-line>
			<view class="text-line">
				<text class="text-name">客户类型:</text>
				<text class="text-value">{{detail.customerInfo.memberType|customerType}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">客户名称:</text>
				<text class="text-value">{{detail.customerInfo.memberName|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">客户来源:</text>
				<text class="text-value">{{detail.customerInfo.memberSource|memberSource}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">联系方式:</text>
				<text class="text-value">{{detail.customerInfo.contactPhone |filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">联系地址:</text>
				<text class="text-value">{{detail.customerInfo.contactAddress|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">身份证号码:</text>
				<text class="text-value">{{detail.customerInfo.cardId|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">失效日期:</text>
				<text class="text-value">{{detail.customerInfo.cardValidity|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">身份证正反面:</text>
				<!-- <text class="text-value">{{detail.customerInfo.sfUrl|filterNull}}</text>
			</view> -->

				<text v-if="!detail.customerInfo.sfUrl" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.customerInfo.sfUrl">
				<u-album :urls="formatImage(detail.customerInfo.sfUrl)" multipleSize="100"></u-album>
			</view>
			<view class="text-line">
				<text class="text-name">驾驶证类型:</text>
				<text class="text-value">{{detail.customerInfo.drivingType|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">失效日期:</text>
				<text class="text-value">{{detail.customerInfo.drivingValidity|filterNull}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">驾驶证正副页:</text>
				<!-- 	<text class="text-value">{{detail.customerInfo.jsUrl|filterNull}}</text>
			</view> -->

				<text v-if="!detail.customerInfo.jsUrl" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.customerInfo.jsUrl">
				<u-album :urls="formatImage(detail.customerInfo.jsUrl)" multipleSize="100"></u-album>
			</view>
			<view class="text-line" v-if="detail.customerInfo.creditCode">
				<text class="text-name">统一社会信用代码:</text>
				<text class="text-value">{{detail.customerInfo.creditCode|filterNull}}</text>
			</view>
			<view class="text-line" v-if="detail.customerInfo.businessLicenseUrl">
				<text class="text-name">营业执照:</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.customerInfo.businessLicenseUrl">
				<u-album :urls="formatImage(detail.customerInfo.businessLicenseUrl)" multipleSize="100"></u-album>
			</view>
		</view>
		<view class="item" style="padding-top: 20rpx;"
			v-if="detail.orderInfo.orderStatus>3&&detail.orderInfo.orderStatus<10">
			<u-icon name="order" color="#1573FF" label="交车验车单" labelColor="#333333"></u-icon>
			<u-line color="#efefef" margin="20rpx 0"></u-line>
			<view class="text-line">
				<text class="text-name">车身照片:</text>
				<!-- <text class="text-value">{{detail.carInspection.bodyImage}}</text>
			</view> -->
				<text v-if="!detail.carInspection.bodyImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.carInspection.bodyImage">
				<u-album :urls="formatImage(detail.carInspection.bodyImage)" multipleSize="100" singleSize="100">
				</u-album>
			</view>
			<view class="text-line">
				<text class="text-name">仪表盘/油表:</text>
				<!-- 	<text class="text-value">{{detail.carInspection.panelImag}}</text>
			</view>
			 -->
				<text v-if="!detail.carInspection.panelImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.carInspection.panelImage">
				<u-album :urls="formatImage(detail.carInspection.panelImage)" multipleSize="100" singleSize="100">
				</u-album>
			</view>
			<view class="text-line">
				<text class="text-name">内饰照片:</text>
				<!-- <text class="text-value">{{detail.carInspection.interiorImage}}</text>
			</view> -->
				<text v-if="!detail.carInspection.interiorImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.carInspection.interiorImage">
				<u-album :urls="formatImage(detail.carInspection.interiorImage)" multipleSize="100" singleSize="100">
				</u-album>
			</view>
			<view class="text-line">
				<text class="text-name">车辆划痕:</text>
				<!-- <text class="text-value">{{ detail.carInspection.scratchImage}}</text>
			</view> -->

				<text v-if="!detail.carInspection.scratchImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.carInspection.scratchImage">
				<u-album :urls="formatImage(detail.carInspection.scratchImage)" multipleSize="100" singleSize="100">
				</u-album>
			</view>
			<view class="text-line">
				<text class="text-name">车辆油量:</text>
				<text class="text-value">{{detail.carInspection.fuelCapacity}}/16</text>
			</view>
			<view class="text-line">
				<text class="text-name">车辆公里数:</text>
				<text class="text-value">{{detail.carInspection.vehicleMileage}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">车辆随车物品:</text>
				<text class="text-value">{{detail.carInspection.accessoryItems}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">取车时间:</text>
				<text class="text-value">{{detail.carInspection.takeAlsoTime}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">处理人:</text>
				<text class="text-value">{{detail.carInspection.conductor}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">其他描述:</text>
				<text class="text-value">{{detail.carInspection.remark}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">客户签名:</text>
				<text v-if="!detail.carInspection.signImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.carInspection.signImage">
				<u-album :urls="formatImage(detail.carInspection.signImage)" multipleSize="100" singleSize="100">
				</u-album>
			</view>
		</view>
		<view class="item" style="padding-top: 20rpx;"
			v-if="detail.orderInfo.orderStatus>4&&detail.orderInfo.orderStatus<10">
			<u-icon name="order" color="#1573FF" label="还车验车单" labelColor="#333333"></u-icon>
			<u-line color="#efefef" margin="20rpx 0"></u-line>
			<view class="text-line">
				<text class="text-name">车身照片:</text>
				<!-- <text class="text-value">{{detail.alsoCarCheck.bodyImage}}</text>
			</view> -->
				<text v-if="!detail.alsoCarCheck.bodyImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.alsoCarCheck.bodyImage">
				<u-album :urls="formatImage(detail.alsoCarCheck.bodyImage)" multipleSize="100" singleSize="100">
				</u-album>
			</view>
			<view class="text-line">
				<text class="text-name">仪表盘/油表:</text>
				<!-- <text class="text-value">{{detail.alsoCarCheck.panelImag}}</text>
			</view> -->
				<text v-if="!detail.alsoCarCheck.panelImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.alsoCarCheck.panelImage">
				<u-album :urls="formatImage(detail.alsoCarCheck.panelImage)" multipleSize="100" singleSize="100">
				</u-album>
			</view>
			<view class="text-line">
				<text class="text-name">内饰照片:</text>
				<!-- <text class="text-value">{{detail.alsoCarCheck.interiorImage}}</text>
			</view> -->

				<text v-if="!detail.alsoCarCheck.interiorImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.alsoCarCheck.interiorImage">
				<u-album :urls="formatImage(detail.alsoCarCheck.interiorImage)" multipleSize="100" singleSize="100">
				</u-album>
			</view>
			<view class="text-line">
				<text class="text-name">车辆划痕:</text>
				<!-- <text class="text-value">{{ detail.alsoCarCheck.scratchImage}}</text>
			</view> -->

				<text v-if="!detail.alsoCarCheck.scratchImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.alsoCarCheck.scratchImage">
				<u-album :urls="formatImage(detail.alsoCarCheck.scratchImage)" multipleSize="100" singleSize="100">
				</u-album>
			</view>
			<view class="text-line">
				<text class="text-name">车辆油量:</text>
				<text class="text-value">{{detail.alsoCarCheck.fuelCapacity}}/16</text>
			</view>
			<view class="text-line">
				<text class="text-name">车辆公里数:</text>
				<text class="text-value">{{detail.alsoCarCheck.vehicleMileage}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">车辆随车物品:</text>
				<text class="text-value">{{detail.alsoCarCheck.accessoryItems}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">还车时间:</text>
				<text class="text-value">{{detail.alsoCarCheck.takeAlsoTime}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">处理人:</text>
				<text class="text-value">{{detail.alsoCarCheck.conductor}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">其他描述:</text>
				<text class="text-value">{{detail.alsoCarCheck.remark}}</text>
			</view>
			<view class="text-line">
				<text class="text-name">客户签名:</text>
				<text v-if="!detail.alsoCarCheck.signImage" class="text-value">--</text>
			</view>
			<view style="margin-left: 30rpx;" v-if="detail.alsoCarCheck.signImage">
				<u-album :urls="formatImage(detail.alsoCarCheck.signImage)" multipleSize="100" singleSize="100">
				</u-album>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/order-api.js';
	import settings from '@/settings.js'
	export default {
		filters: {
			memberType(val) {
				return {
					1: '企业',
					2: '个人',
				} [Number(val)] || '';
			},
			memberSource(val) {
				return {
					1: '搜索',
					2: '分享',
					3: '扫码',
					4: '手动录入',
				} [Number(val)] || '';
			},
			imageUrl(url) {
				return process.env.VUE_APP_BASE_IMAGE_URL + url
			},
		},
		data() {
			return {
				order: {},
				detail: {
					"orderInfo": { //订单信息
						"orderNo": '', //  "05055c045ad744799ee12ac0f3f41050",//订单编号
						"orderStatus": '', //  11,//订单状态
						"rentalType": '', //  null,//取车类型
						"takeStoreName": '', //  "北广场自助点",//取车门店
						"alsoStoreName": '', //  "北广场自助点",//还车门店
						"actualStartTime": '', //  null,//实际取车时间
						"actualEndTime": '', //  null,//实际还车时间
						"leaseDays": '', //  2//租赁天数
					},
					"carInfo": { //车辆信息
						"modelName": '', //  "风骏5",//预定品牌/车系/车型
						"carNo": '', //  null,//车牌号
						"vinNo": '', //  null,//车架号
						"engineNo": '', //  null,//发动机号
						"styleModel": '', //  null,//能源形式
						"fuelType": '', //  null,//燃油类型
						"speedChangingBox": '', //  null,//变速箱
						"seating": '', //  null,//座位数
						"displacement": '', //  null//排量
					},
					"customerInfo": { //客户信息
						"memberNo": '', //  "M16462134546695155",//客户编号
						"memberType": '', //  2,//客户类型
						"memberName": '', //  "代元宝",//客户名称/企业名称
						"memberSource": '', //  4,//客户来源
						"contactPhone": '', //  "13892006829",//联系电话
						"contactAddress": '', //  "陕西省西安市碑林区",//联系地址 /企业地址
						"cardId": '', //  "610423198901224412",//身份证号
						"cardValidity": '', //  "2026-01-01",//身份证有效期
						"sfUrl": [], //身份证图片
						"drivingId": '', // "610423198901224412",//驾驶证编号
						"drivingType": '', // "c1",//驾驶证类型
						"drivingValidity": '', // "2026-01-01",//驾驶证有效期
						"jsUrl": [], //驾驶证图片
						"businessLicenseUrl": null, //营业执照
						"creditCode": null //统一社会信用代码
					},
					"carInspection": { //交车验车单
						"id": '', //  "05055c045ad744799ee12ac0f3f41051",
						"fuelCapacity": '', //  1.0,//车辆油量
						"vehicleMileage": '', //  1.0,//公里数
						"accessoryItems": '', //  null,//车辆随车物品(逗号隔开)
						"remark": '', //  null,//其他描述
						"takeAlsoTime": '', //  null,//取车时间
						"conductor": '', //  "张三",//处理人
						"bodyImage": [], //  null,//车身照片
						"panelImage": [], //  null,//仪表盘
						"interiorImage": [], //  null,//内饰照片
						"scratchImage": [], //  null,//车辆划痕
						"signImage": [], //  null//客户签名
					},
					"alsoCarCheck": { //还车验车单
						"id": '', //  "05055c045ad744799ee12ac0f3f41051",
						"fuelCapacity": '', //  1.0,//车辆油量
						"vehicleMileage": '', //  1.0,//公里数
						"accessoryItems": '', //  null,//车辆随车物品(逗号隔开)
						"remark": '', //  null,//其他描述
						"takeAlsoTime": '', //  null,//还车时间
						"conductor": '', //  "张三",//处理人
						"lkosten": '', //  null,//补充油费(还车验车)
						"bodyImage": [], //  null,//车身照片
						"panelImage": [], //  null,//仪表盘
						"interiorImage": [], //  null,//内饰照片
						"scratchImage": [], //  null,//车辆划痕
						"signImage": [], //  null//客户签名
					}
				},
			}
		},
		methods: {
			getData() {
				api.detail(this.order.orderNo).then(response => {
					this.detail.orderInfo = response.data.orderInfo || {};
					this.detail.customerInfo = response.data.customerInfo || {};
					this.detail.carInfo = response.data.carInfo || {};
					this.detail.alsoCarCheck = response.data.alsoCarCheck || {};
					this.detail.carInspection = response.data.carInspection || {};
					this.detail.alsoCarCheck = response.data.alsoCarCheck || {};
				});
			},
			formatImage(images) {
				let arr = [];
				for (let url of images) {
					arr.push(settings.baseImageUrl + url);
				}
				return arr;
			}
		},
		onLoad: function(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.order = item;
			this.getData();
		},
	}
</script>

<style lang="scss" scoped>
	.layout {
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;

		.layout-circle {
			width: 85rpx;
			height: 85rpx;
			background-image: linear-gradient(135deg, #F3F8FE, #A2C7FF);
			border-radius: 50%;
			display: inline-flex;
			align-items: center;
			justify-content: center;

			text {
				color: $blue15;
			}
		}

		text {
			font-size: 26rpx;
			color: $black33;
			margin-top: 8rpx;

		}
	}
</style>
